<!DOCTYPE html>
<html>
<head>
    <title>素材编辑</title>
    <#include "/header.html">
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.0.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/dist/bootstrap.css">
    <link href="${request.contextPath}/statics/dist/summernote.css" rel="stylesheet">
    <link type="text/css" href="${request.contextPath}/statics/dist/public/style/cssreset-min.css">

    <style>
        .note-editor .note-editable {
            line-height: 1.2;
            font-size: 18px;
        }
    </style>
</head>
<body>
<style type="text/css">
    .emoticons{
        margin-bottom:20px;
    }
    .emoticons .publisher{
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px dotted #dbdbdb;
    }
    .emoticons .publisher textarea{
        width: 500px;
        height: 140px;
        padding: 5px 10px;
        border: 1px solid #dbdbdb;
        resize: none;
    }
    .form-group .trigger{
        font-size: 24px;
        font-weight: bold;
        color: #666;
        position: absolute;
        z-index: 10000;
        left: 290px;
        top: 48px;
    }
    .form-group .trigger-active{
        color: #eb7350;
    }
    .emoticons #result{
        padding: 10px 15px;
        border: 1px dotted #dbdbdb;
        margin-top: 10px;
        min-height: 150px;
        line-height: 24px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .emoticons #result img{
        vertical-align: middle;
    }

    .widget-layer{
        position: relative;
        width: 410px;
        margin-top: 8px;
        background: #fff;
        border: 1px solid #dbdbdb;
        border-radius: 2px;
    }
    .widget-layer:before{
        position: absolute;
        top: -16px;
        left: 2px;
        display: block;
        content: '';
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border-bottom-color: #dbdbdb;
    }
    .widget-layer:after{
        position: absolute;
        top: -15px;
        left: 2px;
        display: block;
        content: '';
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border-bottom-color: #f0f0f0;
    }
    .widget-layer .widget-tool{
        height: 28px;
        background: #f0f0f0;
    }
    .widget-layer .widget-close{
        float: right;
        width: 28px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        font-family: Arial;
    }
    .widget-layer ul{
        width: 372px;
        margin: 0 auto;
        padding: 15px 5px 20px;
        overflow: hidden;
        list-style: none;
    }
    .widget-layer li{
        position: relative;
        z-index: 8;
        float: left;
        width: 22px;
        height: 22px;
        padding: 4px;
        margin-left: -1px;
        margin-top: -1px;
        border: 1px solid #e8e8e8;
        cursor: pointer;
        box-sizing: content-box;
    }
    .widget-layer li:hover{
        z-index: 9;
        border-color: #eb7350;
    }

    .panel-heading.note-toolbar {
        display: none;
    }

    #layer {
        position: absolute;
        width: 505px;
        margin: 0 auto;
        padding: 15px 5px 20px;
        overflow: hidden;
        list-style: none;
        padding:0;
        left:550px;
    }

    #layer li {
        position: relative;
        z-index: 8;
        float: left;
        width: 26px;
        height: 26px;
        padding: 4px;
        border: 1px solid #e8e8e8;
        cursor: pointer;
        box-sizing: content-box;
    }

    #layer li:hover {
        border: 1px solid darkred;
    }
</style>
<!--<style>-->
<!--    .m{ width: 800px; margin-left: auto; margin-right: auto; }-->
<!--</style>-->
<div  class="panel panel-default" id="rrapp" v-cloak>
    <div class="panel-heading" >素材标题：{{bVideoInfo.articleTitle}}</div>
    <form class="form-horizontal">

        <div class="form-group">
            <div class="col-sm-2 control-label" style="color: red;">品牌</div>
            <div class="col-sm-10">
                <input class="form-control" list="editBrandNames" placeholder="品牌" id="brandName">
                <datalist id="editBrandNames" style="line-height: 10px">

                </datalist>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label" style="color: red;">分类</div>
            <div class="col-sm-10">
                <input class="form-control" list="editTypeNames" placeholder="分类" id="articleTypeName">
                <datalist id="editTypeNames" style="line-height: 10px">

                </datalist>
            </div>
        </div>

        <!--<div class="form-group">
            <div class="col-sm-2 control-label">素材标题</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="bVideoInfo.articleTitle" id="articleTitle" name="articleTitle" placeholder="素材标题"/>
            </div>
        </div>-->

        <!--素材开始-->
        <div class="form-group">
            <div class="col-sm-2 control-label">封面图片</div>
            <div class="col-sm-10">
                <div id="articleImgUrls">

                </div>
                <input type="file" accept="image/*"  class="form-control" id='uploadImg' onchange="inserttxImg(this,'ps')"  multiple/>
            </div>
        </div>
        <!--素材结束-->

        <!--视频开始-->
        <div class="form-group">
            <div class="col-sm-2 control-label">视频文件</div>
            <div class="col-sm-10">
                <!--<img id="videoImgUrl" width="100px" height="100px" />-->
                <!--<img width="200px" height="200px" id="img"/>-->
                <video id="videoUrl" width="200px" height="200px"  controls="controls">
                    您的浏览器不支持 video 标签。
                </video>
                <input type="file" accept="video/mp4,audio/mp4"  class="form-control" id='uploadVideo' onchange="inserttxVie(this,'video')"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">视频高度</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="bVideoInfo.videoHeight" id="videoHeight" name="videoHeight" placeholder="视频高度(px)"/>
            </div>
        </div>
        <!--视频结束-->

        <!---->
        <div class="form-group publisher">
            <div class="col-sm-2 control-label">配文编辑</div>
            <ul id="layer">
                <li onmousedown="return false" title="微笑"><img data-src="/statics/dist/public/image/1.png" src="/statics/dist/public/image/1.png"></li>
                <li onmousedown="return false" title="撇嘴"><img data-src="/statics/dist/public/image/2.png" src="/statics/dist/public/image/2.png"></li>
                <li onmousedown="return false" title="色"><img data-src="/statics/dist/public/image/3.png" src="/statics/dist/public/image/3.png"></li>
                <li onmousedown="return false" title="发呆"><img data-src="/statics/dist/public/image/4.png" src="/statics/dist/public/image/4.png"></li>
                <li onmousedown="return false" title="得意"><img data-src="/statics/dist/public/image/5.png" src="/statics/dist/public/image/5.png"></li>
                <li onmousedown="return false" title="流泪"><img data-src="/statics/dist/public/image/6.png" src="/statics/dist/public/image/6.png"></li>
                <li onmousedown="return false" title="害羞"><img data-src="/statics/dist/public/image/7.png" src="/statics/dist/public/image/7.png"></li>
                <li onmousedown="return false" title="闭嘴"><img data-src="/statics/dist/public/image/8.png" src="/statics/dist/public/image/8.png"></li>
                <li onmousedown="return false" title="睡"><img data-src="/statics/dist/public/image/9.png" src="/statics/dist/public/image/9.png"></li>
                <li onmousedown="return false" title="大哭"><img data-src="/statics/dist/public/image/10.png" src="/statics/dist/public/image/10.png"></li>
                <li onmousedown="return false" title="尴尬"><img data-src="/statics/dist/public/image/11.png" src="/statics/dist/public/image/11.png"></li>
                <li onmousedown="return false" title="发怒"><img data-src="/statics/dist/public/image/12.png" src="/statics/dist/public/image/12.png"></li>
                <li onmousedown="return false" title="调皮"><img data-src="/statics/dist/public/image/13.png" src="/statics/dist/public/image/13.png"></li>
                <li onmousedown="return false" title="呲牙"><img data-src="/statics/dist/public/image/14.png" src="/statics/dist/public/image/14.png"></li>
                <li onmousedown="return false" title="惊讶"><img data-src="/statics/dist/public/image/15.png" src="/statics/dist/public/image/15.png"></li>
                <li onmousedown="return false" title="难过"><img data-src="/statics/dist/public/image/16.png" src="/statics/dist/public/image/16.png"></li>
                <li onmousedown="return false" title="囧"><img data-src="/statics/dist/public/image/18.png" src="/statics/dist/public/image/18.png"></li>
                <li onmousedown="return false" title="抓狂"><img data-src="/statics/dist/public/image/19.png" src="/statics/dist/public/image/19.png"></li>
                <li onmousedown="return false" title="吐"><img data-src="/statics/dist/public/image/20.png" src="/statics/dist/public/image/20.png"></li>
                <li onmousedown="return false" title="偷笑"><img data-src="/statics/dist/public/image/21.png" src="/statics/dist/public/image/21.png"></li>
                <li onmousedown="return false" title="愉快"><img data-src="/statics/dist/public/image/22.png" src="/statics/dist/public/image/22.png"></li>
                <li onmousedown="return false" title="白眼"><img data-src="/statics/dist/public/image/23.png" src="/statics/dist/public/image/23.png"></li>
                <li onmousedown="return false" title="傲慢"><img data-src="/statics/dist/public/image/24.png" src="/statics/dist/public/image/24.png"></li>
                <li onmousedown="return false" title="困"><img data-src="/statics/dist/public/image/26.png" src="/statics/dist/public/image/26.png"></li>
                <li onmousedown="return false" title="惊恐"><img data-src="/statics/dist/public/image/27.png" src="/statics/dist/public/image/27.png"></li>
                <li onmousedown="return false" title="流汗"><img data-src="/statics/dist/public/image/28.png" src="/statics/dist/public/image/28.png"></li>
                <li onmousedown="return false" title="憨笑"><img data-src="/statics/dist/public/image/29.png" src="/statics/dist/public/image/29.png"></li>
                <li onmousedown="return false" title="悠闲"><img data-src="/statics/dist/public/image/30.png" src="/statics/dist/public/image/30.png"></li>
                <li onmousedown="return false" title="奋斗"><img data-src="/statics/dist/public/image/31.png" src="/statics/dist/public/image/31.png"></li>
                <li onmousedown="return false" title="咒骂"><img data-src="/statics/dist/public/image/32.png" src="/statics/dist/public/image/32.png"></li>
                <li onmousedown="return false" title="疑问"><img data-src="/statics/dist/public/image/33.png" src="/statics/dist/public/image/33.png"></li>
                <li onmousedown="return false" title="嘘"><img data-src="/statics/dist/public/image/34.png" src="/statics/dist/public/image/34.png"></li>
                <li onmousedown="return false" title="晕"><img data-src="/statics/dist/public/image/35.png" src="/statics/dist/public/image/35.png"></li>
                <li onmousedown="return false" title="衰"><img data-src="/statics/dist/public/image/37.png" src="/statics/dist/public/image/37.png"></li>
                <li onmousedown="return false" title="骷髅"><img data-src="/statics/dist/public/image/38.png" src="/statics/dist/public/image/38.png"></li>
                <li onmousedown="return false" title="敲打"><img data-src="/statics/dist/public/image/39.png" src="/statics/dist/public/image/39.png"></li>
                <li onmousedown="return false" title="再见"><img data-src="/statics/dist/public/image/40.png" src="/statics/dist/public/image/40.png"></li>
                <li onmousedown="return false" title="擦汗"><img data-src="/statics/dist/public/image/41.png" src="/statics/dist/public/image/41.png"></li>
                <li onmousedown="return false" title="抠鼻"><img data-src="/statics/dist/public/image/42.png" src="/statics/dist/public/image/42.png"></li>
                <li onmousedown="return false" title="鼓掌"><img data-src="/statics/dist/public/image/43.png" src="/statics/dist/public/image/43.png"></li>
                <li onmousedown="return false" title="坏笑"><img data-src="/statics/dist/public/image/45.png" src="/statics/dist/public/image/45.png"></li>
                <li onmousedown="return false" title="左哼哼"><img data-src="/statics/dist/public/image/46.png" src="/statics/dist/public/image/46.png"></li>
                <li onmousedown="return false" title="右哼哼"><img data-src="/statics/dist/public/image/47.png" src="/statics/dist/public/image/47.png"></li>
                <li onmousedown="return false" title="哈欠"><img data-src="/statics/dist/public/image/48.png" src="/statics/dist/public/image/48.png"></li>
                <li onmousedown="return false" title="鄙视"><img data-src="/statics/dist/public/image/49.png" src="/statics/dist/public/image/49.png"></li>
                <li onmousedown="return false" title="委屈"><img data-src="/statics/dist/public/image/50.png" src="/statics/dist/public/image/50.png"></li>
                <li onmousedown="return false" title="快哭了"><img data-src="/statics/dist/public/image/51.png" src="/statics/dist/public/image/51.png"></li>
                <li onmousedown="return false" title="阴险"><img data-src="/statics/dist/public/image/52.png" src="/statics/dist/public/image/52.png"></li>
                <li onmousedown="return false" title="亲亲"><img data-src="/statics/dist/public/image/53.png" src="/statics/dist/public/image/53.png"></li>
                <li onmousedown="return false" title="可怜"><img data-src="/statics/dist/public/image/55.png" src="/statics/dist/public/image/55.png"></li>
                <li onmousedown="return false" title="菜刀"><img data-src="/statics/dist/public/image/56.png" src="/statics/dist/public/image/56.png"></li>
                <li onmousedown="return false" title="西瓜"><img data-src="/statics/dist/public/image/57.png" src="/statics/dist/public/image/57.png"></li>
                <li onmousedown="return false" title="啤酒"><img data-src="/statics/dist/public/image/58.png" src="/statics/dist/public/image/58.png"></li>
                <li onmousedown="return false" title="咖啡"><img data-src="/statics/dist/public/image/61.png" src="/statics/dist/public/image/61.png"></li>
                <li onmousedown="return false" title="猪头"><img data-src="/statics/dist/public/image/63.png" src="/statics/dist/public/image/63.png"></li>
                <li onmousedown="return false" title="玫瑰"><img data-src="/statics/dist/public/image/64.png" src="/statics/dist/public/image/64.png"></li>
                <li onmousedown="return false" title="凋谢"><img data-src="/statics/dist/public/image/65.png" src="/statics/dist/public/image/65.png"></li>
                <li onmousedown="return false" title="嘴唇"><img data-src="/statics/dist/public/image/66.png" src="/statics/dist/public/image/66.png"></li>
                <li onmousedown="return false" title="爱心"><img data-src="/statics/dist/public/image/67.png" src="/statics/dist/public/image/67.png"></li>
                <li onmousedown="return false" title="心碎"><img data-src="/statics/dist/public/image/68.png" src="/statics/dist/public/image/68.png"></li>
                <li onmousedown="return false" title="蛋糕"><img data-src="/statics/dist/public/image/69.png" src="/statics/dist/public/image/69.png"></li>
                <li onmousedown="return false" title="炸弹"><img data-src="/statics/dist/public/image/71.png" src="/statics/dist/public/image/71.png"></li>
                <li onmousedown="return false" title="便便"><img data-src="/statics/dist/public/image/75.png" src="/statics/dist/public/image/75.png"></li>
                <li onmousedown="return false" title="月亮"><img data-src="/statics/dist/public/image/76.png" src="/statics/dist/public/image/76.png"></li>
                <li onmousedown="return false" title="太阳"><img data-src="/statics/dist/public/image/77.png" src="/statics/dist/public/image/77.png"></li>
                <li onmousedown="return false" title="拥抱"><img data-src="/statics/dist/public/image/79.png" src="/statics/dist/public/image/79.png"></li>
                <li onmousedown="return false" title="强"><img data-src="/statics/dist/public/image/80.png" src="/statics/dist/public/image/80.png"></li>
                <li onmousedown="return false" title="弱"><img data-src="/statics/dist/public/image/81.png" src="/statics/dist/public/image/81.png"></li>
                <li onmousedown="return false" title="握手"><img data-src="/statics/dist/public/image/82.png" src="/statics/dist/public/image/82.png"></li>
                <li onmousedown="return false" title="胜利"><img data-src="/statics/dist/public/image/83.png" src="/statics/dist/public/image/83.png"></li>
                <li onmousedown="return false" title="抱拳"><img data-src="/statics/dist/public/image/84.png" src="/statics/dist/public/image/84.png"></li>
                <li onmousedown="return false" title="勾引"><img data-src="/statics/dist/public/image/85.png" src="/statics/dist/public/image/85.png"></li>
                <li onmousedown="return false" title="拳头"><img data-src="/statics/dist/public/image/86.png" src="/statics/dist/public/image/86.png"></li>
                <li onmousedown="return false" title="OK"><img data-src="/statics/dist/public/image/90.png" src="/statics/dist/public/image/90.png"></li>
                <li onmousedown="return false" title="跳跳"><img data-src="/statics/dist/public/image/93.png" src="/statics/dist/public/image/93.png"></li>
                <li onmousedown="return false" title="发抖"><img data-src="/statics/dist/public/image/94.png" src="/statics/dist/public/image/94.png"></li>
                <li onmousedown="return false" title="怄火"><img data-src="/statics/dist/public/image/95.png" src="/statics/dist/public/image/95.png"></li>
                <li onmousedown="return false" title="转圈"><img data-src="/statics/dist/public/image/96.png" src="/statics/dist/public/image/96.png"></li>
                <li onmousedown="return false" title="嘿哈"><img data-src="/statics/dist/public/image/106.png" src="/statics/dist/public/image/106.png"></li>
                <li onmousedown="return false" title="捂脸"><img data-src="/statics/dist/public/image/107.png" src="/statics/dist/public/image/107.png"></li>
                <li onmousedown="return false" title="奸笑"><img data-src="/statics/dist/public/image/108.png" src="/statics/dist/public/image/108.png"></li>
                <li onmousedown="return false" title="机智"><img data-src="/statics/dist/public/image/109.png" src="/statics/dist/public/image/109.png"></li>
                <li onmousedown="return false" title="皱眉"><img data-src="/statics/dist/public/image/110.png" src="/statics/dist/public/image/110.png"></li>
                <li onmousedown="return false" title="耶"><img data-src="/statics/dist/public/image/111.png" src="/statics/dist/public/image/111.png"></li>
                <li onmousedown="return false" title="吃瓜"><img data-src="/statics/dist/public/image/112.png" src="/statics/dist/public/image/112.png"></li>
                <li onmousedown="return false" title="加油"><img data-src="/statics/dist/public/image/113.png" src="/statics/dist/public/image/113.png"></li>
                <li onmousedown="return false" title="汗"><img data-src="/statics/dist/public/image/114.png" src="/statics/dist/public/image/114.png"></li>
                <li onmousedown="return false" title="天啊"><img data-src="/statics/dist/public/image/115.png" src="/statics/dist/public/image/115.png"></li>
                <li onmousedown="return false" title="Emm"><img data-src="/statics/dist/public/image/116.png" src="/statics/dist/public/image/116.png"></li>
                <li onmousedown="return false" title="社会社会"><img data-src="/statics/dist/public/image/117.png" src="/statics/dist/public/image/117.png"></li>
                <li onmousedown="return false" title="旺柴"><img data-src="/statics/dist/public/image/118.png" src="/statics/dist/public/image/118.png"></li>
                <li onmousedown="return false" title="好的"><img data-src="/statics/dist/public/image/119.png" src="/statics/dist/public/image/119.png"></li>
                <li onmousedown="return false" title="打脸"><img data-src="/statics/dist/public/image/120.png" src="/statics/dist/public/image/120.png"></li>
                <li onmousedown="return false" title="加油加油"><img data-src="/statics/dist/public/image/121.png" src="/statics/dist/public/image/121.png"></li>
                <li onmousedown="return false" title="哇"><img data-src="/statics/dist/public/image/122.png" src="/statics/dist/public/image/122.png"></li>
                <li onmousedown="return false" title="红包"><img data-src="/statics/dist/public/image/123.png" src="/statics/dist/public/image/123.png"></li>
                <li onmousedown="return false" title="發"><img data-src="/statics/dist/public/image/124.png" src="/statics/dist/public/image/124.png"></li>
                <li onmousedown="return false" title="福"><img data-src="/statics/dist/public/image/125.png" src="/statics/dist/public/image/125.png"></li>
            </ul>

            <div class="col-sm-10">
<!--                <p><a class="trigger" href="javascript:;" title="表情">☺</a></p>-->
              <!--  <textarea cols="25" rows="10" class="form-control" v-model="bVideoInfo.articleDesc"></textarea>-->
                <div class="summernote"></div>
            </div>
            <div>
                <a href="http://www.fhdq.net/emoji/emojifuhao.html" target="_Blank">更多符号表情1</a>
                <a href="http://www.oicqzone.com/tool/emoji/" target="_Blank">更多符号表情2</a>
                <a href="https://bj.96weixin.com/emoji/" target="_Blank">更多符号表情3</a>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">配文预览</div>
            <div class="col-sm-10">
<!--                <div style="text-align:right;"><button id="formatText">解析预览</button></div>-->
                <div class="emoticons">
<!--                    <div class="note-editable" contenteditable="true"></div>-->

                    <div class="publisher" style="opacity: 0;height: 0;overflow: hidden;">
                       <p> <textarea name="content"></textarea></p>
                    </div>

                    <div id="result" contenteditable="false" style="border: 1px solid red"></div>

                </div>

            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">热度类型</div>
            <div class="col-sm-10">
                <label class="radio-inline">
                    <input type="radio" name="hotType" value="0" v-model="bVideoInfo.hotType"  /> 普通素材
                </label>
                <label class="radio-inline">
                    <input type="radio" name="hotType" value="1" v-model="bVideoInfo.hotType" /> VIP素材
                </label>
<!--                <input type="text" class="form-control" v-model="bVideoInfo.articleHotScore" id="articleHotScore" name="articleHotScore" placeholder="热度值"/>-->
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label"></div>
            <input type="button" class="btn btn-primary" @click="updateInfo" value="保存"/>
            <input onclick='window.close();' type="button" value="返回" class="rrapp-but" style="background-color: #f0ad4e;border-color: #f0ad4e;color: #fff"/>
        </div>
    </form>
</div>
<script>

    $(function(){
        $('.summernote').summernote({
            height: 200,
            tabsize: 7,
            lang: 'zh-CN'
        });

        $('.note-editable.panel-body').eq(0).attr('id','ta');//给 div赋id

        // $(".note-editable").each( function () {
        //     var $this = $(this);
        //     if (parseInt($this.css("fontSize")) < 30) {
        //         $this.css({ "font-size": "30px" });
        //     }
        // });
        // $('.note-editable').css('font-size','30px');

        /*除去粘贴内容样式*/
        $(".note-editable").on("paste", function (e) {
            textInit(e)
        });

        function textInit(e) {
            e.preventDefault();
            var text;
            var clp = (e.originalEvent || e).clipboardData;
            if (clp === undefined || clp === null) {
                text = window.clipboardData.getData("text") || "";
                if (text !== "") {
                    if (window.getSelection) {
                        var newNode = document.createElement("span");
                        newNode.innerHTML = text;
                        window.getSelection().getRangeAt(0).insertNode(newNode);
                    } else {
                        document.selection.createRange().pasteHTML(text);
                    }
                }
            } else {
                text = clp.getData('text/plain') || "";
                if (text !== "") {
                    document.execCommand('insertText', false, text);
                }
            }
        }

    });

    $(function () {

        $.ajax({
            type: "POST",
            async:false,
            url: baseURL + 'sys/bbrandinfo/queryAll',
            contentType: "application/json",
            success: function(r){
                if(r.code==0){
                    vm.bbrandinfo=r.brandInfo;
                    for(var i=0;i<r.brandInfo.length;i++){
                        $("#editBrandNames").append(
                            "<option value=" + r.brandInfo[i].brandName +">"+"</option>");
                    }
                }
            }
        });

        $.ajax({
            type: "POST",
            async:false,
            url: baseURL + 'sys/barticletypeinfo/queryAll',
            contentType: "application/json",
            success: function(r){
                if(r.code==0){
                    //vm.bbrandinfo=r.brandInfo;
                    for(var i=0;i<r.barticletypeinfo.length;i++){
                        $("#editTypeNames").append(
                            "<option value=" + r.barticletypeinfo[i].articleTypeName +">"+"</option>");
                    }
                }
            }
        });

        var url = location.search;
        var videoId = url.split("=")[1];
        if(videoId!=0){
            loadData(videoId);
        }

    })


    function loadData(e) {
        console.log("e:"+e);
        $.get(baseURL + "sys/bmaterialinfo/info/"+e, function(r){
            vm.bVideoInfo=r.bVideoInfo;
            console.log(r);
           $("#articleImgUrl").attr("src",vm.bVideoInfo.articleImgUrl);

           $("#videoUrl").attr("src", vm.bVideoInfo.videoUrl);

            $("#brandName").val(vm.bVideoInfo.brandName);

            $("#articleTypeName").val(vm.bVideoInfo.articleTypeName);

            $('.summernote').summernote("code",vm.bVideoInfo.articleDesc);

            if (vm.bVideoInfo.articleImgUrl != null){
                var split = vm.bVideoInfo.articleImgUrl.split(',');
                for (let i = 0; i < split.length; i++) {
                    $("#articleImgUrls").append(
                        "<img src='" + split[i] +"'  width='100px' height='100px' >");
                }
            }
        })
    }

    function uploadVie(file, pathname ) {
        console.log(file);
        var bucketName='zktuistatic';
        const client = new window.OSS({
            region: 'oss-cn-shenzhen', // hangzhou, shanghai, shenzhen
            accessKeyId: 'LTAI4Fh7PnYLw3uQvoUYiazS',
            accessKeySecret: 'cEw7e8QMz0h4XY4qmzCoTzhHITqyUU',
            bucket: bucketName
        });
        var date = new Date();
        var yeaer = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        var datePath =yeaer+""+month+""+day;
        var key = "";
        var exName=getFileExtendingName(file.name);
        key=pathname+"/"+datePath+"/"+guid()+exName;
        client.put(key, file).then(function () {
            return client.get(key);
        }).then(function(ret) {
            var rootUrl="http://zktfile.wxslzf.com/";
            console.log(ret.res);
            if(ret.res.status==200 && ret.res.statusCode==200) {
                if (pathname == 'video') {

                    if (vm.bVideoInfo.videoUrl != null && vm.bVideoInfo.videoUrl != '') {
                        var objName = vm.bVideoInfo.videoUrl.replace(rootUrl, "");
                        if (objName != null && objName != '') {
                            client.delete(objName);
                        }
                    }

                    vm.bVideoInfo.videoUrl = ret.res.requestUrls[0].replace("http://zktuistatic.oss-cn-shenzhen.aliyuncs.com/", "http://zktfile.wxslzf.com/");
                    vm.bVideoInfo.videoFormat=exName;
                    vm.bVideoInfo.videoSize=ret.res.size;
                    $("#videoUrl").attr("src", vm.bVideoInfo.videoUrl);
                }
            }

        }).catch(function(err) {
            console.log(err);
        });
    }

    function inserttxVie(e,pathname) {
        var files = e.files;
        var length = files.length;
        console.log("选择了" + length + "张图片");
        uploadVie(files[0],pathname);
    }

    function uploadImg(file, pathname ,i) {
        var bucketName='zktuistatic';
        const client = new window.OSS({
            region: 'oss-cn-shenzhen', // hangzhou, shanghai, shenzhen
            accessKeyId: 'LTAI4Fh7PnYLw3uQvoUYiazS',
            accessKeySecret: 'cEw7e8QMz0h4XY4qmzCoTzhHITqyUU',
            bucket: bucketName
        });
        var date = new Date();
        var yeaer = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        var datePath =yeaer+""+month+""+day;
        var key = "";
        var exName=getFileExtendingName(file.name);
        key="material"+"/"+datePath+"/"+guid()+exName;
        client.put(key, file).then(function () {
            return client.get(key);
        }).then(function(ret) {
            var rootUrl="http://zktfile.wxslzf.com/";
            // console.log(ret.res);
            if(ret.res.status==200 && ret.res.statusCode==200) {
                if (vm.bMaterialInfoArticleImgUrl[i] != null && vm.bMaterialInfoArticleImgUrl[i] != '') {
                    var objName = vm.bMaterialInfoArticleImgUrl[i].replace(rootUrl, "");
                    if (objName != null && objName != '') {
                        client.delete(objName);
                    }
                }
                vm.bMaterialInfoArticleImgUrl[i] = ret.res.requestUrls[0].replace("http://zktuistatic.oss-cn-shenzhen.aliyuncs.com/", "http://zktfile.wxslzf.com/");
                //  $("#articleImgUrl").attr("src", vm.bMaterialInfoArticleImgUrl[i]);
                $("#articleImgUrls").append(
                    "<img src='" + vm.bMaterialInfoArticleImgUrl[i] +"'  width='100px' height='100px' vspace='2' hspace='2'>");
            }

        }).catch(function(err) {
            console.log(err);
        });
    }

    function inserttxImg(e,pathname) {
        var files = e.files;
        var length = files.length;
        if (length > 9){
            alert("最多只能选择九张图片")
            return;
        }
        $("#articleImgUrls").empty();
        for (let i = 0; i < length; i++) {
            uploadImg(files[i],files[i].name,i);
        }
    }

    function getFileExtendingName (filename) {
        // 文件扩展名匹配正则
        var reg = /\.[^\.]+$/;
        var matches = reg.exec(filename);
        if (matches) {
            return matches[0];
        }
        return '';
    }

    function guid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
            return v.toString(16);
        });
    }

</script>
<script src="${request.contextPath}/statics/js/modules/sys/bmaterialinfo.js?_${.now?long}"></script>
<!--<script src="${request.contextPath}/statics/dist/jquery.min.js"></script>-->
<!--<script src="${request.contextPath}/statics/dist/bootstrap.min.js"></script>-->
<script src="${request.contextPath}/statics/dist/summernote.js"></script>
<script src="${request.contextPath}/statics/dist/lang/summernote-zh-CN.js"></script>
<script src="${request.contextPath}/statics/dist/code/jquery.emoticons.js"></script>
<script>
    $(function() {
        $.emoticons({
            'activeCls': 'trigger-active'
        }, function(api) {
            var $start = $('.note-editable');
            var $content = $('textarea[name="content"]');
            var $result = $('#result');

            // $('#formatText').click(function() {
            //     $content.html($start.html());
            //     $result.html(api.format($content.val()));
            // });

            if ($start.html() != "") {
                $content.html($start.html());
                $result.html(api.format($content.val()));
            };

            $start.keyup('DOMNodeInserted', function(e) {
                $content.html($start.html());
                $result.html(api.format($content.val()));
            });

        });
    });
</script>

<script type="text/javascript">
    // 在光标位置插入html代码，如果dom没有获取到焦点则追加到最后
    window.onload = function() {
        function insertAtCursor(jsDom, html) {
            if (jsDom != document.activeElement) { // 如果dom没有获取到焦点，追加
                jsDom.innerHTML = jsDom.innerHTML + html;
                return;
            }
            var sel, range;
            if (window.getSelection) {
                // IE9 或 非IE浏览器
                // debugger
                sel = window.getSelection();
                if (sel.getRangeAt && sel.rangeCount) {
                    range = sel.getRangeAt(0);
                    range.deleteContents();
                    // Range.createContextualFragment() would be useful here but is
                    // non-standard and not supported in all browsers (IE9, for one)
                    var el = document.createElement("div");
                    el.innerHTML = html;
                    var frag = document.createDocumentFragment(),
                        node, lastNode;
                    while ((node = el.firstChild)) {
                        lastNode = frag.appendChild(node);
                    }
                    range.insertNode(frag);
                    // Preserve the selection
                    if (lastNode) {
                        range = range.cloneRange();
                        range.setStartAfter(lastNode);
                        range.collapse(true);
                        sel.removeAllRanges();
                        sel.addRange(range);
                    }
                }
            } else if (document.selection && document.selection.type != "Control") {
                // IE < 9
                document.selection.createRange().pasteHTML(html);
            }
        }

        // 点击插入$('ul li:first');
        var ul = document.getElementById('layer');
        var lis = ul.getElementsByTagName('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function() {
                console.log(this.title);

                let html = '[' + this.title + ']';
                insertAtCursor(document.getElementById('ta'), html);

            }
        }
    }
</script>
</body>
</html>
